<template>
  <div class="detail">
    <h2>{{mydetail.title}}</h2>
    <img :src="mydetail.image"/>
    <h3>原价：<del>{{mydetail.price-0+50}}</del>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;现价：<span>{{mydetail.price}}</span></h3>
    <div class="box">
      <button>立即购买</button>
       <button @click="
       myadd({id:mydetail.id,
            price:mydetail.price,
            title:mydetail.title,
            img:mydetail.image
       }) " class="join">加入购物车</button>
    </div>
    </div>
</template>

<script>
import {
  // mapState,
  // mapGetters,
  mapMutations
  // mapActions
} from 'vuex'
export default {
  methods: {
    ...mapMutations([
      'myadd'
    ])
  },
  data () {
    return {
      mydetail: {}
    }
  },
  name: 'detail',

  created () {
    this.$http.getProductDetail(this.$route.params.id)
      .then(resp => {
        if (resp.data.code === 200) {
          this.mydetail = resp.data.data.detail
          // console.log(this.mydetail)
        }
      })
  }
}
</script>

<style scoped lang="scss">
  .detail{
    width:100%;
    box-sizing: border-box;
    padding: 20px;
    img{
      width:100%;
    }
    h2{
      text-align: center;
      margin-top:10px;
      margin-bottom: 10px;
    }
    h3{
      color:red;
      text-align: center;
    }
    .box{
      margin-top:20px;
      display: flex;
      justify-content: space-around;
      button{
        width:20vw;
        height: 10vw;
      }
    }
  }
</style>
